"Calculator"
Bootstrap 3.3.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
</div>
</div>
<div class="button-field">
<button type="button" id="c" class="clear" name="clear"><span>c</span></button>
<button type="button" id="ce" class="clear" name="clear-entry"><span>ce</span></button>
<button type="button" id="del" class="clear" name="delete"><span>del</span></button>
<button type="button" id="/" class="operator" name="devide">÷</button>
<button type="button" id="7" class="number" name="7">7</button>
<button type="button" id="8" class="number" name="8">8</button>
<button type="button" id="9" class="number" name="9">9</button>
<button type="button" id="*" class="operator" name="multiply">×</button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
*,:focus{outline:0}
.clear,.output>*{text-transform:uppercase}
:root{font-size:25px}
*{margin:0;padding:0}
body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)}
button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease}
button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s}
button:active{top:4px;transition:.3s;background:#EEA9A8!important}
.container{height:100vH;display:flex;justify-content:center;align-items:center}
.calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey}
.output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4}
.output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000}
#calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)}
#input{height:1.5rem;font-size:1.5rem}
.number{background-color:rgba(255,255,255,.65)}
.number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)}
.number:active{background-color:rgba(255,255,255,.9)}
.clear{font-size:1rem;background-color:rgba(240,120,120,.5)}
.clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)}
.clear:active{background-color:rgba(240,120,120,.8)}
.equal{background:rgba(70,240,90,.4)}
.equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)}
.equal:active{background-color:rgba(80,240,100,.7)}
.dot,.neg,.operator{background-color:rgba(0,0,0,.15)}
.dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)}
.dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)}
#c{background:rgba(240,10,10,.5)}
#c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)}
#c:active{background:rgba(240,10,10,.6)}
.button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
const buttons = document.querySelectorAll("button");
const currCalc = document.querySelector("#calculation");
const currInput = document.querySelector("#input");
const checkRE = /(\d|\))$/; // RegExp matches, if last character of string is number or ')'
const re1 = /(0+)$/g; // RegExp matches all 0 at the en of a string
const re2 = /\.$/; // RegExp matches dot at the end
let calc = [];
let input = [];
let res;
let intRes = false;
let disCalc = [];
let disResult;
let str;
function onNumber(el) {
// print number, unless user tries to input multiple zeros in the beginning & input-display is full
if (
((el === "0" && (input[0] !== "0" || input.includes("."))) || el !== "0") &&
input.length < 20
) {
input[0] === "0" && !input.includes(".") && el !== "0"
? (input = [])
: input;
input.push(el);
currInput.innerHTML = `${input.join("")}`;
}
}
function onClear(el) {
if (el === "c") {
// clear all
calc = [];
input = [];
intRes = false;
res = undefined;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vuetify Material Dashboard
Bootstrap Loan Calculator

Questions / Comments: